import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { List, Avatar ,Table, Tag, Space,Button,Modal,
    Form, Input, Row ,Col, Checkbox ,Tabs, Typography, Divider,Radio,InputNumber,Select} from 'antd';
import {getForms,getForm} from "../api/formManagement";
export default class Form_Info extends Component {


    constructor(props) {
        super(props)
        this.state = {
            formId:-1,
            formName:"",  //报表名称
            reportDesc:"",  //报表描述
            dims:[],
            colDims:[],
            rowDims:[],
            pageDims:[],
            viewDims:[],
            colMembers:[],
            rowMembers:[]
        }
    }

    closeSelf=()=>{
        this.props.onCancel();
    }

    confirm=()=>{
      //  this.props.handleSave(_v);
    }

    onChange = (e) => {
       // this.setState({ radioValue: e.target.value })
    }

    onChangeFormtName = (e) => {
         this.setState({ formName: e.target.value })
    }

    onChangeAtReportDesc = (e) => {
        // this.setState({ radioValue: e.target.value })
    }

    componentWillReceiveProps(nextProps){
        let formId=nextProps.selectedFormId;
        //查询后端  把后端数据组织到前端
        getForm(formId).then(
            (res) => {
                this.setState({
                    formName:res.data.name,
                    formId:res.data.id,
                    colDims:res.data.colDims,
                    rowDims:res.data.rowDims,
                    pageDims:res.data.pageDims,
                    viewDims:res.data.viewDims,
                    colMembers:res.data.colMembers,
                    rowMembers:res.data.rowMembers,
                    pageMembers:res.data.pageMembers,
                    viewMembers:res.data.viewMembers
                });
            },
            (error) => {
                console.log("get response failed!");
            }
        );

    }


    handleChange(value) {
        console.log(`selected ${value}`);
    }

    getLayoutMbrs = (props) => {
        console.log(props)

        const { Option } = Select;
        return(

                props.dims.map((item,index)=>{
                let members=props.members[0][index];
                let names="";
                for (let v of members) {
                    console.log(v);
                    names= names+"  "+v.name;
                }
              return ( <Row>
                    <Col span={3}>{index+1}</Col>
                    <Col span={6}>
                        <Select defaultValue={item.name} style={{ width: 120 }} onChange={this.handleChange}>
                            <Option key={item.id} value={item.name}>{item.name}</Option>
                        </Select>
                    </Col>
                    <Col span={15}>
                       <Input placeholder="" value={names} />
                    </Col>
                </Row>
            )
            })

        )

    }

    //函数组件
     layout = () => {
        return ( <>
            <Row>
                <Col span={8}>
                    <span>列维</span>
                </Col>
                <Col span={16}>
                    <Button>添加组</Button>
                    <Button>添加组</Button>
                    <Button>添加列</Button>
                    <Button>上移</Button>
                    <Button>下移</Button>
                </Col>
            </Row>
            <Divider />
            <Row>
                <Col span={3}>顺序</Col>
                <Col span={5}>维度</Col>
                <Col span={16}>成员</Col>
            </Row>
            {/*<Row>*/}
            {this.getLayoutMbrs({dims:this.state.colDims,members:this.state.colMembers})}



            {/*</Row>*/}
            <Divider />
            <Row>
                <Col  span={8}>
                    <span>行维</span>
                </Col>
                <Col  span={16}>
                    <Button>添加组</Button>
                    <Button>添加组</Button>
                    <Button>添加行</Button>
                    <Button>上移</Button>
                    <Button>下移</Button>
                </Col>
            </Row>
            <Divider />
            <Row>
                <Col span={3}>顺序</Col>
                <Col span={5}>维度</Col>
                <Col span={16}>成员</Col>
            </Row>
            {/*<Row></Row>*/}
            {this.getLayoutMbrs({dims:this.state.rowDims,members:this.state.rowMembers})}
        </>)
    }


    //函数组件
    layout_PV = () => {
        return ( <>
            <Row>
                <Col span={8}>
                    <span>页面</span>
                </Col>
                <Col span={16}>
                    <Button>添加</Button>
                    <Button>上移</Button>
                    <Button>下移</Button>
                </Col>
            </Row>
            <Divider />
            <Row>
                <Col span={3}>顺序</Col>
                <Col span={5}>维度</Col>
                <Col span={16}>成员</Col>
            </Row>
            {/*<Row>*/}
            {this.getLayoutMbrs({dims:this.state.pageDims,members:[this.state.pageMembers]})}



            {/*</Row>*/}
            <Divider />
            <Row>
                <Col  span={8}>
                    <span>视点</span>
                </Col>
                <Col  span={16}>
                    <Button>添加</Button>
                    <Button>上移</Button>
                    <Button>下移</Button>
                </Col>
            </Row>
            <Divider />
            <Row>
                <Col span={3}>顺序</Col>
                <Col span={5}>维度</Col>
                <Col span={16}>成员</Col>
            </Row>
            {/*<Row></Row>*/}
            {this.getLayoutMbrs({dims:this.state.viewDims,members:[this.state.viewMembers]})}
        </>)
    }




    render() {
        //console.log("render;;;;;;;;;;;;;;;;;;;;res.data.name:"+this.state.formName);

       // const {getFieldDecorator} = this.props.form;
        const formItemLayout = {
            labelCol: {span: 6},
            wrapperCol: {span: 18},
        };


        const { TabPane } = Tabs;

        const radioStyle = {
            display: 'block',
            height: '30px',
            lineHeight: '30px',
        };

        function callback(key) {
            console.log(key);
        }


        const onChange = e => {
            // console.log('radio checked', e.target.value);
            // this.setState({
            //     radioValue: e.target.value,
            // });
        };

        const onChangeAtInputNo=(value)=> {
            console.log('changed', value);
        }

        function handleChangeAtCurrency(value) {
            //console.log(`selected ${value}`);
        }



//



        return (
            <>
                <Modal
                    width={840}
                    height={800}
                    title="表单定义"
                    visible={this.props.visible}
                    confirmLoading={this.props.confirmLoading}
                    // onOk={this.props.handleSave}
                    //okText='保存'
                    cancelText='返回'
                    onCancel={this.props.onCancel}
                    footer={null}
                >
                    <>
                        <Tabs defaultActiveKey="1" onChange={callback}>
                            <TabPane tab="属性" key="1">

                                <Form>
                                    <Row gutter={16}>
                                        <Col span={24}>
                                            <Form.Item
                                                key={"报表名称"}
                                                label="报表名称"
                                                //name="reportName"
                                                rules={[{ required: true, message: 'Please input your report Name!' }]}
                                            >

                                                {/*<div>*/}
                                                    <Input
                                                        // key="input_form_name"
                                                        //onBlur={this.onBlur}
                                                        //onKeyPress={this.onKeyPressOnInput}
                                                        value={this.state.formName}
                                                        onChange={this.onChangeFormtName}

                                                    />
                                                    {/*</div>*/}
                                            </Form.Item>
                                            {/*<Form.Item*/}
                                                {/*key={"报表描述"}*/}
                                                {/*label="报表描述"*/}
                                                {/*name="reportDesc"*/}
                                                {/*rules={[{ required: true, message: 'Please input your report Desc!' }]}*/}
                                            {/*>*/}
                                                {/*<Input*/}
                                                    {/*key="input_form_desc"*/}
                                                    {/*//onBlur={this.onBlur}*/}
                                                    {/*//onKeyPress={this.onKeyPressOnInput}*/}
                                                    {/*value={this.state.reportDesc}*/}
                                                    {/*onChange={this.onChangeAtReportDesc}*/}
                                                    {/*autoFocus*/}
                                                {/*/>*/}
                                            {/*</Form.Item>*/}
                                        </Col>
                                    </Row>

                                </Form>



                            </TabPane>
                            <TabPane tab="行/列布局" key="2">
                                {  this.layout() }
                            </TabPane>
                            <TabPane tab="页面/视点布局" key="3">
                                {  this.layout_PV() }
                            </TabPane>
                            <TabPane tab="其他选项" key="4">
                                Content of Tab Pane 4
                            </TabPane>

                        </Tabs>

                        <Row>
                            <Col span={16}></Col>
                            <Col span={3}><Button type="primary" onClick={this.confirm}>确定</Button></Col>
                            <Col span={3}><Button onClick={this.closeSelf}>取消</Button></Col>
                            <Col span={2}></Col>
                        </Row>

                    </>


                </Modal>


            </>
        );
    }

}

const styles = {
    focus: {
        width: '20px',
        opacity: 1
    },


    box:{
    display: 'flex',
    flexDirection: 'row'
    }
}


